<template>
  <div class="jxal">
    <img src="../../assets/img/5-精选案例/jxal.png" alt="" class="case">
    <img src="../../assets/img/5-精选案例/jxal.png" alt="" class="second-case">
    <p class="swhzSonTopTitle">精选案例</p>
    <div class="jxalSon">
      <ul>
        <li v-for="(item,index) in result" :key="index" @mouseover="showBtn(index)" @mouseout="hideBtn(index)">
          <img :src="item.logo" alt="" :class="{opa:imgIndex==index,noOpa:imgIndex!=index}">
          <button v-if="imgIndex==index" @click="$router.push({path:'/jxaldetail',query:{id:item.id}})">查看详情</button>
        </li>
      </ul>
    </div>

  </div>
</template>
<script>
const img1 = require('../../assets/img/5-精选案例/9.png')
const img2 = require('../../assets/img/5-精选案例/10.png')
const img3 = require('../../assets/img/5-精选案例/11.png')
const img4 = require('../../assets/img/5-精选案例/12.png')
const img5 = require('../../assets/img/5-精选案例/13.png')
const img6 = require('../../assets/img/5-精选案例/14.png')
const img7 = require('../../assets/img/5-精选案例/15.png')
const img8 = require('../../assets/img/5-精选案例/16.png')
export default {
  data() {
    return {
      scrollRoute: '',
      imgList: [[img1], [img2], [img3], [img4], [img5], [img6], [img7], [img8]],
      imgIndex: -1,
      result: ''
    }
  },
  methods: {
    scroll() {
      this.scrollRoute =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      if (this.scrollRoute >= 60) {
      }
    },
    showBtn(index) {
      this.imgIndex = index
    },
    hideBtn(index) {
      this.imgIndex = -1
    }
  },
  mounted() {
    window.addEventListener('scroll', this.scroll)
    this.$ajax
      .post(this.Ipurl + 'project/selectPage', {
        page: 1,
        limit: 8,
        type: '',
        homeShowFlag: 1
      })
      .then(res => {
        this.result = res.data.dataInfo.records
        //  console.log(this.result)
      })
  }
}
</script>
<style scoped>
@keyframes mymove {
  from {
    top: -550px;
  }
  to {
    top: 0;
  }
}
@keyframes mymove2 {
  from {
    top: 0px;
  }
  to {
    top: 550px;
  }
}
.swhzSonTopTitle {
  font-size: 30px;
  color: rgb(34, 34, 34);
  margin-top: 80px;
  z-index: 3;
  position: absolute;
  left: 45%;
}
.jxal {
  width: 100%;
  height: 550px;
  background-color: #f8f9fd;
  overflow: hidden;
  text-align: center;
  position: relative;
}
.case,.second-case {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0px;
  z-index: 0;
  animation: mymove 45s linear infinite reverse;
}
.second-case {
  top: 550px;
  animation: mymove2 45s linear infinite reverse;
}
.jxalSon {
  width: 1200px;
  height: 300px;
  margin: 0 auto;
  margin-top: 150px;
}
.jxalSon ul {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  z-index: 800;
  position: absolute;
  /* box-shadow: 0px 2px 5px #aaa; */
  -moz-box-shadow: 0px 0px 16px #d4d4d4;
  -webkit-box-shadow: 0px 0px 16px #d4d4d4;
  box-shadow: 0px 0px 16px #d4d4d4;
  background-color: #fff;
}
.jxalSon ul li {
  width: 25%;
  height: 50%;
  float: left;
  text-align: center;
  height: 150px;
  line-height: 150px;
  position: relative;
}
.opa {
  opacity: 0.3;
}
.noOpa {
  opacity: 1;
}
.jxalSon ul li img {
  vertical-align: top;
  height: 150px;
}
.jxalSon ul li button {
  width: 100px;
  height: 30px;
  background-color: #ed4041;
  color: #fff;
  border-radius: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -15px;
  -moz-box-shadow: 0px 4px 19px #ed9191;
  -webkit-box-shadow: 0px 4px 19px #ed9191;
  box-shadow: 0px 4px 19px #ed9191;
  font-weight: 600;
}
.nice {
  width: 100%;
  height: 400px;
  position: absolute;
  top: -450px;
  z-index: -9999;
}
.swiper-slide {
  width: 100%;
  height: 100%;
  background-image: url('../../assets/img/5-精选案例/jxal.png');
  border: 1px solid red;
}
</style>


